<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel='stylesheet' type='text/css'/>
    <!-- Custom CSS -->
    <link href="${pageContext.request.contextPath}/css/backdoor.css" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/morris.css" type="text/css"/>
    <!-- Graph CSS -->
    <link href="${pageContext.request.contextPath}/css/font-awesome.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script>
    <%--弹窗--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/BeAlert.css" type="text/css"/>
    <script src="${pageContext.request.contextPath}/js/BeAlert.js"></script>
    <script>
        $(function () {

            // 为关键字着背景色
            var colors = ["bg-primary", "bg-success", "bg-info", "bg-warning", "bg-danger", "bg-alert", "bg-system"];
            var lightness = ["light", "", "dark"];
            $(".bg-color").each(function () {
                var i = Math.floor(Math.random() * (colors.length));
                var j = Math.floor(Math.random() * (colors.length));
                $(this).addClass(colors[i]).addClass(lightness[j]);
            });

        })

        function addItem() {
            var word = prompt("输入新话题名：");
            if (word !== '' && word !== null) {
                window.location.href = '${pageContext.request.contextPath}/backdoor/topicManager/add/' + word;
            }
        }

        function editItem() {
            $(".deleteButton").each(function () {
                $(this).css("display", "inline-block");
            })
        }

        function deleteItem(topicId) {
            confirm("确认提示：", "确定删除该话题及其所有问答？",
                function (isConfirm) {
                    if (isConfirm) {
                        window.location.href = '${pageContext.request.contextPath}/backdoor/topicManager/delete/' + topicId;
                    }
                },
                {width: 400}
            );

        }


    </script>

</head>

<body>
<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="mother-grid-inner">
            <!--header start here-->
            <jsp:include page="backdoor_header.jsp"/>
            <!--heder end here-->
            <!--导航-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="${pageContext.request.contextPath}/backdoor/index">主页</a> <i class="fa fa-angle-right"></i>
                    <a href="${pageContext.request.contextPath}/backdoor/topicManager">话题管理</a> <i
                        class="fa fa-angle-right"></i>
                </li>
            </ol>
            <a href="javascript:void(0);" onclick="addItem();" class="pull-right">新增&nbsp;</a>
            <span class="pull-right">&nbsp;|&nbsp;</span>
            <a href="javascript:void(0);" onclick="editItem();" class="pull-right">编辑</a>
            <!-- Color-variations -->
            <div class="panel1 variations-panel">
                <div class="panel-body mtn">
                    <div class="col-adjust-10">
                        <%--关键词列表--%>
                        <div class="row">

                            <c:forEach items="${topicList}" var="topic">
                                <div class="item col-md-3 w3layouts-bnt">
                                    <a href="javascript:void(0);" onclick="deleteItem(${topic.id})"
                                       style="float: right;display: none;" class="deleteButton">
                                        <img src="${pageContext.request.contextPath}/image/close.png"
                                             style="width: 20px;height: auto;">
                                    </a>
                                    <div class="bg-color pv20 text-white fw600 text-center">${topic.name}</div>
                                </div>

                            </c:forEach>

                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //Color-variations -->

            <div class="clearfix"></div>

            <!--copy rights start here-->
            <jsp:include page="backdoor_footer.jsp"/>
            <!--COPY rights end here-->
        </div>
    </div>
    <!--//content-inner-->
    <!--/sidebar-menu-->
    <jsp:include page="backdoor_sidebar.jsp"/>
    <div class="clearfix"></div>
</div>

<!-- Bootstrap Core JavaScript -->
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<!-- /Bootstrap Core JavaScript -->

</body>

</html>